<!-- 导航栏组件 -->
<template>
  <!-- 导航栏容器 -->
  <div class="navigation-bar">
    <!-- 导航栏起始部分，包含 logo 和用户登录注册信息 -->
    <span class="initiator">
      <!-- 品牌 logo 区域 -->
      <div class="logo-content">
        <!-- 水平排列 logo 图片和文字 -->
        <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
          <!-- 显示品牌 logo 图片 -->
          <img src="../assets/img/logo.png" style="height:50px;" alt="" />
          <!-- 品牌文字信息 -->
          <div class="logo-text">
            <!-- 品牌名称 -->
            <div>Tyut融销通</div>
            <!-- 品牌副标题 -->
            <div style="font-size:12px;margin-top:5px;color: #666;">
              太原理工大学农产品融销一体平台
            </div>
          </div>
        </div>
      </div>
      <!-- 未登录时显示登录注册按钮 -->
      <div class="userin" v-if="$store.state.loginUserNickname === ''">
        <!-- 点击跳转登录页面 -->
        <span @click="Login" class="login">登录</span> |
        <!-- 点击跳转注册页面 -->
        <span @click="Register" class="register">注册</span>
      </div>
    </span>

    <!-- 菜单内容区域，使用 v-cloak 防止未编译模板闪烁 -->
    <div class="menu-content" v-cloak>
      <!-- Element UI 菜单组件 -->
      <el-menu
        :default-active="$store.state.activeIndex"
        mode="horizontal"
        @select="handleSelect"
        background-color="#346a73"
        text-color="#fff"
        active-text-color="#fff"
        id="menu">
        <!-- 首页菜单项，点击跳转首页 -->
        <el-menu-item index="1" class="item" @click="frontBtn">首页</el-menu-item>
        <!-- 商品货源菜单项，点击跳转商品货源页面 -->
        <el-menu-item index="2" class="item" @click="goodsBtn">商品货源</el-menu-item>
        <!-- 求购需求菜单项，点击跳转求购需求页面 -->
        <el-menu-item index="3" class="item" @click="purchaseBtn">求购需求</el-menu-item>
        <!-- 农业知识菜单项，点击跳转农业知识页面 -->
        <el-menu-item index="4" class="item" @click="knowledgesBtn">农业知识</el-menu-item>
        <!-- 专家指导菜单项，点击跳转专家指导页面 -->
        <el-menu-item index="5" class="item" @click="guideBtn">专家指导</el-menu-item>
        <!-- 购物车菜单项，点击跳转购物车页面 -->
        <el-menu-item index="6" class="item" @click="shopCartBtn">购物车</el-menu-item>
        <!-- 融资申请子菜单 -->
        <el-submenu index="7">
          <!-- 子菜单标题 -->
          <template slot="title">融资申请</template>
          <!-- 智能匹配菜单项，点击跳转智能匹配页面 -->
          <el-menu-item index="7-1" @click.native="smartMatchBtn">智能匹配</el-menu-item>
          <!-- 融资申请菜单项，点击跳转融资申请页面 -->
          <el-menu-item index="7-2" @click.native="financingBtn">融资申请</el-menu-item>
        </el-submenu>
        <!-- 未登录时的空用户信息区域 -->
        <div class="userin" v-if="$store.state.loginUserNickname === ''"></div>
        <!-- 已登录时显示设置子菜单 -->
        <el-submenu index="8" v-else>
          <!-- 子菜单标题 -->
          <template slot="title">设置</template>
          <!-- 个人中心菜单项，点击跳转个人中心页面 -->
          <el-menu-item index="8-1" @click.native="userPage">个人中心</el-menu-item>
          <!-- 管理员可见的用户管理菜单项，点击跳转用户管理页面 -->
          <el-menu-item index="8-3" @click="userManage" v-if="$store.getters.isAdmin">用户管理</el-menu-item>
          <!-- 管理员可见的商品管理菜单项，点击跳转商品管理页面 -->
          <el-menu-item index="8-4" @click.native="goodsManage" v-if="$store.getters.isAdmin">商品管理</el-menu-item>
          <!-- 关于我们菜单项，点击跳转关于我们页面 -->
          <el-menu-item index="8-5" @click.native="handleAbout">关于我们</el-menu-item>
          <!-- 退出菜单项，点击执行退出操作 -->
          <el-menu-item index="8-6" @click.native="logout">退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
let Base64 = require("js-base64");

export default {
  data() {
    return {
      // 用户头像信息
      avatar: "",
    };
  },
  methods: {
    /**
     * 菜单选择事件处理函数
     * @param {string} key - 当前选中菜单项的索引
     * @param {Array} keyPath - 当前选中菜单项的路径
     */
    handleSelect(key, keyPath) {},
    /**
     * 跳转登录页面
     */
    Login() {
      this.$router.push("/login");
    },
    /**
     * 跳转注册页面
     */
    Register() {
      this.$router.push("/register");
    },
    /**
     * 退出登录操作
     */
    logout() {
      // 清除登录用户昵称
      this.$store.commit("updateLoginUserNickname", "");
      // 移除本地存储信息
      this.$store.commit("removeStorage");
      // 跳转首页
      this.$router.push("/home").catch((err) => err);
      // 清除订单需求页面的页码信息
      if (sessionStorage.getItem("/order/needs/pageCode")) {
        sessionStorage.removeItem("/order/needs/pageCode");
      }
      // 清除订单商品页面的页码信息
      if (sessionStorage.getItem("/order/goods/pageCode")) {
        sessionStorage.removeItem("/order/goods/pageCode");
      }
      // 清除用户搜索页面的页码信息
      if (sessionStorage.getItem("/user/search/pageCode")) {
        sessionStorage.removeItem("/user/search/pageCode");
      }
    },
    /**
     * 跳转首页
     */
    frontBtn() {
      this.$router.push("/home/front").catch((err) => err);
    },
    /**
     * 跳转求购需求页面
     */
    purchaseBtn() {
      this.$router.push("/home/purchase").catch((err) => err);
    },
    /**
     * 跳转商品货源页面
     */
    goodsBtn() {
      this.$router.push("/home/goods").catch((err) => err);
    },
    /**
     * 跳转农业知识页面
     */
    knowledgesBtn() {
      this.$router.push("/home/knowledge").catch((err) => err);
    },
    /**
     * 跳转专家指导页面
     */
    guideBtn() {
      this.$router.push("/home/guide").catch((err) => err);
    },
    /**
     * 跳转购物车页面
     */
    shopCartBtn() {
      this.$router.push("/home/shopcart").catch((err) => err);
    },
    /**
     * 跳转个人中心页面
     */
    userPage() {
      this.$router.push("/home/user").catch((err) => err);
    },
    /**
     * 跳转添加消息页面（未使用）
     */
    addMessagePage() {
      this.$router.push("/home/addmessage").catch((err) => err);
    },
    /**
     * 跳转关于我们页面
     */
    handleAbout() {
      this.$router.push("/home/aboutUs").catch((err) => err);
    },
    /**
     * 跳转商品管理页面
     */
    goodsManage() {
      this.$router.push("/home/userGood/publishedgoodsAdmin").catch((err) => err);
    },
    /**
     * 跳转用户管理页面
     */
    userManage() {
      this.$router.push("/home/usermanage").catch((err) => err);
    },
    /**
     * 跳转融资申请页面
     */
    financingBtn() {
      this.$router.push("/home/financing").catch((err) => err);
    },
    /**
     * 跳转智能匹配页面
     */
    smartMatchBtn() {
      this.$router.push("/home/smartMatch").catch((err) => err);
    },
  },
  created() {
    // 设置默认激活的菜单项为首页
    this.$store.commit("updateActiveIndex", "1");
    // 检查本地存储中是否存在 token
    if (window.localStorage.token) {
      // 获取本地存储中的 token
      let token = window.localStorage.token;
      // 按点分割 token
      let arr = token.split(".");
      // 解码 token 的第二部分
      let res = Base64.decode(arr[1]);
      // 更新登录用户的昵称
      this.$store.commit("updateLoginUserNickname", JSON.parse(res).nickname);
      // 更新登录用户的头像
      this.$store.commit("updateLoginUserAvatar", JSON.parse(res).avatar);
      // 更新用户角色
      this.$store.commit("updateRole", JSON.parse(res).role);
    }
  },
};
</script>

<style lang="less" scoped>
/* 导航栏整体样式 */
.navigation-bar {
  width: 100%;
  /* 导航栏起始部分样式 */
  .initiator{
    width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #96d9c1;
    padding: 5px 20px;
    /* 品牌 logo 区域样式 */
    .logo-content{
      color: #27578d;
      text-align: center;
      /* 品牌文字信息样式 */
      .logo-text{
        margin-left: 10px;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        // justify-content: flex-start;
      }
    }
  }
  /* 菜单内容区域样式 */
  .menu-content{
    height: 42px;
    background-color: #346a73;
  }
  /* Element UI 菜单样式 */
  .el-menu {
    width: 1100px;
    margin: 0 auto;
    height: 40px;
    /* 菜单项样式 */
    .el-menu-item {
      background-color: #346a73 ;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      margin-right: 34px;
    }
    /* 子菜单样式 */
    .el-submenu {
      .template {
        background-color: #346a73 ;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
      }
      .el-submenu__title {
        line-height: 40px;
        height: 40px;
        background-color: #346a73;
      }
      .el-menu-item {
        background-color: #346a73 !important;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
      }
      background-color: #346a73 !important;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
  /* 登录按钮样式 */
  .login{
    cursor: pointer;
  }
  /* 注册按钮样式 */
  .register{
    cursor: pointer;
  }
}
/* 水平菜单底部边框样式 */
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
/* 子菜单标题图标颜色样式 */
.menu-content /deep/ .el-submenu__title i{
  color: #fff;
}
/* v-cloak 指令样式，防止未编译模板闪烁 */
[v-cloak] {
  display: none;
}
</style>